<template>
  <div class="quality-overview-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="container_top">
        <div class="content">
          <div class="title-content">
            <div class="title">
              <h4>质量整改统计</h4>
            </div>
            <div class="btns">
              <ul class="switch-btn">
                <li
                  :class="id1 === 'month' ? 'active' : ''"
                  @click="handleTypeDateClick('month')">本月</li>
                <li
                  :class="id1 === 'all' ? 'active' : ''"
                  @click="handleTypeDateClick('all')">全部</li>
              </ul>
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="echarts-container"></div>
        </div>
        <div class="content">
          <div class="title-content">
            <div class="title">
              <h4>标段巡检整改情况</h4>
            </div>
            <div class="btns">
              <ul class="switch-btn">
                <li
                  :class="id1 === 'month' ? 'active' : ''"
                  @click="handleTypeDateClick('month')">本月</li>
                <li
                  :class="id1 === 'all' ? 'active' : ''"
                  @click="handleTypeDateClick('all')">全部</li>
              </ul>
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="echarts-container"></div>
        </div>
        <div class="content">
          <div class="title-content">
            <div class="title">
              <h4>质量预警</h4>
            </div>
            <div class="btns">
              <i class="el-icon-more"></i>
            </div>
          </div>
          <ul class="echarts-container list">
            <li class="item">
              <div class="name text">
                <span>张三</span>
                <span class="time">2021-03-23</span>
              </div>
              <div class="info text">
                <div class="message">
                  <span class="label">整改部位</span>
                  <span class="value">ddddd</span>
                </div>
                <div class="status">逾期4天</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="container_bottom">
        <div class="echarts-left">
          <div class="title-content">
            <div class="title">
              <h4>质量问题趋势分析</h4>
            </div>
            <div class="btns">
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="echarts-container">
            <echarts-base :options="echartsOptions"></echarts-base>
          </div>
        </div>
        <div class="echarts-right">
          <div class="title-content">
            <div class="title">
              <h4>项目验收</h4>
            </div>
            <div class="btns">
              <ul class="switch-btn">
                <li
                  :class="id1 === 'month' ? 'active' : ''"
                  @click="handleTypeDateClick('month')">按工序</li>
                <li
                  :class="id1 === 'all' ? 'active' : ''"
                  @click="handleTypeDateClick('all')">按标段</li>
              </ul>
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="echarts-container">
            <echarts-base :options="echartsOptions"></echarts-base>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import echartsBase from '@/components/echarts/base';

export default {
  components: {
    Breadcrumb,
    echartsBase
  },
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        { name: '质量管理' },
        { name: '质量总览' }
      ],
      id1: 'month',
      warnList: [],
      echartsData: {
        legend: [],
        xAxisData: [],
        series: []
      },
    };
  },
  computed: {
    // 产值图表配置
    echartsOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            minValueSpan: 5,
            zoomLock: false
          }
        ],
        legend: {
          data: this.echartsData.legend,
          // right: 100,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.echartsData.xAxisData,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          }
        },
        series: this.echartsData.series
      };
    }
  },
  methods: {
    handleTypeDateClick(type) {
      this.id1 = type;
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/main';

  .quality-overview-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: $baseBg;
    main {
      width: 100%;
      height: calc(100% - 40px);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .container_top {
        width: 100%;
        height: calc(50% - 10px);
        display: flex;
        justify-content: space-between;
        .content {
          width: calc(33.3% - 10px);
          height: 100%;
          padding: 10px;
          border-radius: 15px;
          background-color: $mainBg;
        }
      }
      .container_bottom {
        width: 100%;
        height: calc(50% - 10px);
        display: flex;
        justify-content: space-between;
        .echarts-left {
          width: calc(66.6% - 10px);
          height: 100%;
          padding: 10px;
          border-radius: 15px;
          background-color: $mainBg;
        }
        .echarts-right {
          width: calc(33.3% - 10px);
          height: 100%;
          border-radius: 15px;
          padding: 10px;
          background-color: $mainBg;
        }
      }
      .echarts-container {
        width: 100%;
        height: calc(100% - 40px);
        &.list {
          overflow-y: auto;
          padding: 0 10px;
          .item {
            width: 100%;
            height: 80px;
            padding: 0 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: $lightLinearG;
            .text {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 5px 0;
              .message {
                font-size: 14px;
                display: flex;
                align-items: center;
                .value {
                  display: inline-block;
                  width: 300px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 16px;
                  color: $mainColor;
                  margin-left: 20px;
                }
              }
              .status {
                font-size: 13px;
              }
            }
          }
        }
      }
      .title-content {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btns {
          display: flex;
          justify-content: space-between;
          align-items: center;
          i {
            font-size: 24px;
            cursor: pointer;
            margin-left: 15px;
            &:hover {
              color: $mainColor;
            }
          }
          .switch-btn {
            width: 120px;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 25px;
            background-color: rgba(161, 161, 161, .5);
            margin-left: 20px;
            li {
              width: 60px;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 13px;
              border-radius: 25px;
              cursor: pointer;
              transition: all .3s;
              z-index: 1;
              &.active {
                background-color: $successBtn;
              }
            }
          }
        }
      }
    }
  }
</style>
